<template>
  <div>
    <MglMarker
      v-for="(item,key) in markersArr"
      :coordinates="[item.lng,item.lat]"
      :key="key"
      :ref="'area'+key"
    >
      <div slot="marker">
        <div class="area-wide">
          <div class="area-text">{{item.showCode}}</div>
        </div>
      </div>
    </MglMarker>
  </div>
</template>
   
<script>
import _ from "lodash";
import { MglMarker } from "vue-mapbox";
import "@/assets/iconfont/iconfont.css";
import { mapGetters } from "vuex";
//bus传值
import bus from "../eventBus";

export default {
  name: "MapAreaText",
  components: {
    MglMarker
  },
  data() {
    return {
      markersArr: []
    };
  },
  computed: {},
  created() {
    this.$http.get("mapboxmaplevel/getall", null, res => {
      //数据处理
      let textArr = res.data;
      this.markersArr = textArr[0].children;
      for (let i of this.markersArr) {
        i.lng = i.center.split(",")[0];
        i.lat = i.center.split(",")[1];
        i.showCode = i["name"];
      }
    });
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.area-wide {
  text-align: center;
}

.area-text {
  color: #fff;
  font-size: 12px;
  margin: auto;
  position: relative;
  background: rgba($color: #000000, $alpha: 0.6);
  padding: 3px;
  border-radius: 2px;
}
</style>